<template>
  <div class="dashboard">
    <!-- 页面标题区域 -->
    <div class="page-header">
      <h1 class="page-title">
        <i class="title-icon">📊</i>
        数据中台概览
      </h1>
      <div class="page-subtitle">
        <p>实时监控您的数据处理流程和系统状态</p>
        <p class="current-time">当前时间：{{ currentTime }}</p>
      </div>
    </div>
    
    <!-- 统计卡片区域 -->
    <div class="stats-section">
      <el-row :gutter="24">
        <el-col :xs="24" :sm="12" :md="6" v-for="(stat, index) in statsCards" :key="index">
          <div class="stat-card" :style="{ '--card-color': stat.color }">
            <div class="stat-icon">
              <i>{{ stat.icon }}</i>
            </div>
            <div class="stat-content">
              <div class="stat-value">{{ stat.value }}</div>
              <div class="stat-label">{{ stat.label }}</div>
              <div class="stat-trend">
                <span :class="['trend', stat.trend > 0 ? 'up' : 'down']">
                  {{ stat.trend > 0 ? '↗' : '↘' }} {{ Math.abs(stat.trend) }}%
                </span>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 功能面板区域 -->
    <div class="panels-section">
      <el-row :gutter="24">
        <!-- 快速操作面板 -->
        <el-col :xs="24" :lg="12">
          <div class="panel quick-actions">
            <div class="panel-header">
              <h3><i>⚡</i> 快速操作</h3>
            </div>
            <div class="panel-content">
              <div class="action-grid">
                <div class="action-item" @click="navigateTo('/data-sync/create')">
                  <i class="action-icon">🔄</i>
                  <span>创建同步任务</span>
                </div>
                <div class="action-item" @click="navigateTo('/workflow-scheduler/create')">
                  <i class="action-icon">⏰</i>
                  <span>新建调度任务</span>
                </div>
                <div class="action-item" @click="navigateTo('/data-sources')">
                  <i class="action-icon">💾</i>
                  <span>管理数据源</span>
                </div>
                <div class="action-item" @click="navigateTo('/datawarehouse-config')">
                  <i class="action-icon">⚙️</i>
                  <span>配置数据仓库</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <!-- 系统状态面板 -->
        <el-col :xs="24" :lg="12">
          <div class="panel system-status">
            <div class="panel-header">
              <h3><i>🖥️</i> 系统状态</h3>
            </div>
            <div class="panel-content">
              <div class="status-list">
                <div class="status-item" v-for="status in systemStatus" :key="status.name">
                  <div class="status-indicator" :class="status.status"></div>
                  <span class="status-name">{{ status.name }}</span>
                  <span class="status-value">{{ status.value }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 欢迎信息面板 -->
    <div class="welcome-section">
      <div class="welcome-panel">
        <div class="welcome-content">
          <h2>🎉 欢迎使用 DataWorks 数据中台</h2>
          <p>这是一个基于 Apache Doris 的现代化数据中台解决方案，提供完整的数据处理、分析和可视化功能。</p>
          <div class="feature-highlights">
            <div class="feature-item">
              <i>🚀</i>
              <span>高性能数据处理</span>
            </div>
            <div class="feature-item">
              <i>📈</i>
              <span>实时数据分析</span>
            </div>
            <div class="feature-item">
              <i>🔒</i>
              <span>企业级安全保障</span>
            </div>
            <div class="feature-item">
              <i>🌐</i>
              <span>云原生架构</span>
            </div>
          </div>
          <div class="welcome-actions">
            <el-button type="primary" size="large" @click="testClick">
              <i style="margin-right: 8px;">🧪</i>
              测试系统功能
            </el-button>
            <el-button size="large" @click="navigateTo('/data-sources')">
              <i style="margin-right: 8px;">📚</i>
              开始使用
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const currentTime = ref('')

const statsCards = reactive([
  {
    icon: '💾',
    label: '数据源',
    value: 12,
    trend: 8.5,
    color: '#409eff'
  },
  {
    icon: '🔄',
    label: '同步任务',
    value: 28,
    trend: 12.3,
    color: '#67c23a'
  },
  {
    icon: '⏰',
    label: '调度任务',
    value: 15,
    trend: -2.1,
    color: '#e6a23c'
  },
  {
    icon: '⚠️',
    label: '异常任务',
    value: 2,
    trend: -15.8,
    color: '#f56c6c'
  }
])

const systemStatus = reactive([
  { name: 'PostgreSQL 数据库', status: 'online', value: '正常运行' },
  { name: 'Redis 缓存', status: 'online', value: '正常运行' },
  { name: 'Airflow 调度器', status: 'online', value: '正常运行' },
  { name: 'Doris 数据仓库', status: 'offline', value: '待配置' },
])

const updateTime = () => {
  currentTime.value = new Date().toLocaleString('zh-CN')
}

const testClick = () => {
  ElMessage.success('🎉 Vue应用运行正常！系统功能测试通过！')
}

const navigateTo = (path) => {
  router.push(path)
}

onMounted(() => {
  updateTime()
  setInterval(updateTime, 1000)
})
</script>

<style scoped>
.dashboard {
  min-height: calc(100vh - 120px);
  color: #e5e5e5;
}

/* 页面标题区域 */
.page-header {
  margin-bottom: 32px;
  padding: 24px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  border-radius: 12px;
  border: 1px solid #404040;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px 0;
  color: #ffffff;
  font-size: 28px;
  font-weight: 600;
}

.title-icon {
  font-size: 32px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.page-subtitle p {
  margin: 4px 0;
  color: #bdc3c7;
}

.current-time {
  font-weight: 500;
  color: #409eff;
}

/* 统计卡片区域 */
.stats-section {
  margin-bottom: 32px;
}

.stat-card {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border: 1px solid #404040;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--card-color);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.stat-icon {
  font-size: 40px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--card-color), 0.1);
  border-radius: 50%;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #bdc3c7;
  margin-bottom: 8px;
}

.stat-trend {
  font-size: 12px;
}

.trend.up {
  color: #67c23a;
}

.trend.down {
  color: #f56c6c;
}

/* 功能面板区域 */
.panels-section {
  margin-bottom: 32px;
}

.panel {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border: 1px solid #404040;
  border-radius: 12px;
  margin-bottom: 24px;
  overflow: hidden;
}

.panel-header {
  padding: 20px 24px;
  background: rgba(64, 158, 255, 0.1);
  border-bottom: 1px solid #404040;
}

.panel-header h3 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-content {
  padding: 24px;
}

/* 快速操作面板 */
.action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: rgba(64, 158, 255, 0.05);
  border: 1px solid #404040;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-item:hover {
  background: rgba(64, 158, 255, 0.15);
  transform: translateY(-2px);
  border-color: #409eff;
}

.action-icon {
  font-size: 24px;
}

/* 系统状态面板 */
.status-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border: 1px solid #404040;
}

.status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.status-indicator.online {
  background: #67c23a;
  box-shadow: 0 0 10px rgba(103, 194, 58, 0.5);
}

.status-indicator.offline {
  background: #f56c6c;
  box-shadow: 0 0 10px rgba(245, 108, 108, 0.5);
}

.status-name {
  flex: 1;
  color: #e5e5e5;
}

.status-value {
  color: #bdc3c7;
  font-size: 14px;
}

/* 欢迎信息面板 */
.welcome-section {
  margin-bottom: 32px;
}

.welcome-panel {
  background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
  border: 1px solid #404040;
  border-radius: 12px;
  overflow: hidden;
}

.welcome-content {
  padding: 32px;
  text-align: center;
}

.welcome-content h2 {
  margin: 0 0 16px 0;
  color: #ffffff;
  font-size: 24px;
}

.welcome-content > p {
  color: #bdc3c7;
  margin-bottom: 24px;
  line-height: 1.6;
}

.feature-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(64, 158, 255, 0.05);
  border-radius: 8px;
  border: 1px solid #404040;
}

.welcome-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard {
    padding: 16px;
  }
  
  .page-header {
    padding: 16px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .stat-card {
    flex-direction: column;
    text-align: center;
  }
  
  .action-grid {
    grid-template-columns: 1fr;
  }
  
  .feature-highlights {
    grid-template-columns: 1fr;
  }
  
  .welcome-actions {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .welcome-content {
    padding: 20px;
  }
  
  .panel-content {
    padding: 16px;
  }
}
</style> 